<template>
  <div>
    <a-modal
      title="编辑菜单"
      :visible="visible"
      :confirmLoading="confirmLoading"
      destroyOnClose
      @cancel="cancel"
      @ok="handleOk"
    >
      <a-spin :spinning="detailLoading" tip="Loading...">
        <a-form
          ref="ruleForm"
          :form="form"
          :label-col="{span:4}"
          :wrapper-col="{span:19}"
          layout="horizontal"
        >
          <a-form-item label="上级菜单">
            <a-select
              :disabled="true"
              v-decorator="['parentPerId', {rules: [{ required: true, message: '请选择状态' }],
            initialValue: this.detailInfo.parentPerId === '1' ? -1 : this.detailInfo.parentPerId }]"
              show-search
              :filter-option="filterOption"
              option-filter-prop="children"
            >
              <a-select-option :value="-1">主类目</a-select-option>
              <a-select-option
                :value="item.permissionId"
                v-for="item in treeData"
                @click="changeMenu(item)"
              >
                {{item.permissionName}}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="菜单名称">
            <a-input
              v-decorator="['permissionName', {rules: [{ required: true, message: '菜单名称不能为空' }],
            initialValue: this.detailInfo.permissionName}]"
              placeholder="请输入菜单名称..."
              :maxLength="50"
            />
          </a-form-item>

          <a-form-item label="菜单图标">
            <a-popover title="选择图标" trigger="click" v-model="iconVisible">
              <a slot="content">
                <div  style="width: 700px">
                  <IconSelector @change="iconChange"/>
                </div>
              </a>
              <a-input
                readonly
                v-decorator="['permissionLog', {rules: [{ required: true, message: '图标不能为空' }], initialValue: this.detailInfo.permissionLog}]"
                placeholder="请选择菜单图标..."
                :maxLength="50"
              />
            </a-popover>

          </a-form-item>
          <a-form-item label="路由地址">
            <a-input
              v-decorator="['permissionPath', {rules: [{ required: true, message: '路由地址不能为空' }],
            initialValue: this.detailInfo.permissionPath}]"
              placeholder="请输入路由地址..."
              :maxLength="50"
            />
          </a-form-item>
          <a-form-item label="文件名称">
            <a-input
              :disabled="true"
              v-decorator="['permissionFile', {rules: [{ required: true, message: '文件名称不能为空' }],
            initialValue: this.detailInfo.permissionFile}]"
              placeholder="请输入文件名称..."
              :maxLength="50"
            />
          </a-form-item>
          <a-form-item label="权限标识">
            <a-input
              :disabled="true"
              v-decorator="['permissionTag', {rules: [{ required: true, message: '权限标识不能为空' }],
             initialValue: record.permissionTag}]"
              placeholder="请输入权限标识,(例如: system:user:list)"
              :maxLength="50"
            />
          </a-form-item>
          <a-form-item label="排序值">
            <a-input
              v-decorator="['permissionSort', {rules: [{ required: true, message: '排序值不能为空' }],
             initialValue: record.permissionSort}]"
              placeholder="请输入排序值..."
              :maxLength="11"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import { message } from 'ant-design-vue'
import { updateRoleInfo, addRoleInfo, getMenuDetail } from '@/api/menu-manage'
import { getMenuList, mapTree } from '@/utils/util'
import IconSelector from '@/components/IconSelector'

export default {
  name: 'adminManagementAddEdit',
  props: ['visible', 'record', 'type'],
  components:{
    IconSelector
  },
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      modalVisible: false,
      roleSelectList:[],
      // 新增目前最多是两层菜单，编辑需要展示父类，所以暂时先这样处理
      treeData: getMenuList(store.getters.roles,[]) ,

      iconVisible: false, // 图标

      detailInfo:{}, // 权限详情值
      detailLoading: false, // 详情loading
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val;
      if(!this.type && val){
        this.initDetail();
      }
      if(!val){
        this.detailInfo = {}
      }
    }
  },
  methods: {
    // 权限详情
    initDetail(){
      const params = {
        permissionId: this.record.permissionId,
        userId: store.getters.userInfo?.userId,
      }
      this.detailLoading = true;
      getMenuDetail(params).then(res => {
        this.detailLoading = false;
        this.detailInfo = res.data;
      })
    },
    iconChange(e){
      this.iconVisible = false;
      this.form.setFieldsValue({
        permissionLog:e,
      })
    },
    changeMenu(item){
      this.detailInfo = item;
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        console.log(values?.parentPerId)
        if (!err) {
          this.confirmLoading = true;
          let params = {
            ...values,
            parentPerId: !values?.parentPerId ? null : this.detailInfo.parentPerId,
            permissionTag: !values?.parentPerId ? null : this.detailInfo.permissionTag, // 权限标识
            permissionId: this.detailInfo.permissionId,
            permissionLevel: this.detailInfo.permissionLevel,
            permissionPath: values.permissionPath, // 路由地址
            userId: store.getters.userInfo?.userId,
          }
          console.log(params)
          // 如果是修改需要新增这两个参数
          if (!this.type) {
            params.id = this.record.id;
            params.updateUserId = this.record.userId;
          }
          updateRoleInfo(params).then(res => {
            this.confirmLoading = false
            if (res.code === 200) {
              message.success(res.msg || '操作成功！')
              this.$emit('onOk', this.type ? 'add' : 'edit')
            }
          })
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
